Introduction

Enlink is a modern dashboard template build with Bootstrap 4. It contains alot high flexibility and configurablue components. With a detailed documentation & clean code, it allow developers build any projects easily!

Thank you for downloading Enlink - Bootstrap Admin Template. If you have any queries, please feel free to contact us.

Author by: Theme_Nate

Support via Email: jiasheng_93@hotmail.com

Getting Started

Once you have unzip the compressed file, you’ll see something like below

  • Enlink
    • demo
    • starter
    • documentation

Each directory contains demo & starter folder.

template

This folder contains all demo source code of Espire, you may possible to import code to your project from code samples provided in this folder.

starter

This is a starter pack for developer, it initialize the basic of the template. You can create pages and write your own code here, we highly recommend you copy this folder to your workspace for development.

You can see the following structure in the folders:

    • app
    • .babelrc
    • gulpfile.babel
    • package.json
    • package.lock.json

Installation

Enlink use Gulp to handle complilation, minification & etc. To use it with the template, you may need to install the following things to get started

Node & NPM

You can download Node.js from https://nodejs.org/en/download/. NPM comes bundled with Node.js.

Gulp

Run the command below at your cmd as Administrator to install Gulp, make sure npm was installed before installing Gulp

npm install gulp-cli -g
NPM Package

Run npm install from the root of your project(where package.json , .babelrc, gulpfile.babel.js located) to install all the necessary dependencies.

Main Commands

Once you have completed the steps above, you will be able to run the following commands and start working

COMMAND DESCRIPTION
npm run start Start a local static HTML web server http://localhost:3000 which will which auto update & refresh when any html, css, js files was changes.
npm run build It will create a dist folder & copy all compiled & minimized files into it for production ready.
Others Commands
COMMAND DESCRIPTION
gulp scss-dev Compile SCSS to CSS.
gulp watch-scss Watch SCSS Changes.
gulp js Compile ES6 to ES5 and concatnate core vendor JS.
gulp watch-js Watch ES6 Changes & auto compile to ES5

Folder Structure

You can see the following folder structure once you have entered starter directory

    • .babelrc Babel config file
    • gulpfile.babel Included all gulp tasks logic
    • package.json npm entry file
    • app
      • assets
        • css All vallina css files placed here
        • es6 Included all ES6 files which will transpile js folder
        • fonts Included all font files
        • images Included all image files
        • js Included all transpiled JS files
        • scss Included scss files which will output to css folder
        • vendors Included all source files of 3rd party plugins
    • index.html

Page Structure

HTML

The HTML structure is the same throughout the template.

You can config your theme or layout by adding classes below to .app tag

Class Description
Header
.is-primary Set primary color to header
.is-success Set success color to header
.is-secondary Set secondary color to header
.is-danger Set danger color to header
SIDE NAV BACKGRUND
.is-side-nav-dark Dark theme side navigation
SIDE NAV LAYOUT
.is-folded Set navigation folded as default

Styling

Sass

Enlink was built with Sass, it is a CSS extension language which able you to create, edit or manage styling in a easy way.
All scss files will compile into a single css file named app.min.css output to assets/css folder.
If you like to add your own styling, you can add it into assets/scss/_custom.scss, it can also extend the default _variables.scss

You can see the following folder structure once you have entered starter directory

    • apps
      Included apps module related scss files
    • common
      Included common used & utilities scss files
    • components
      Included components related scss files
    • dashboard
      Included dashboard related scss files
    • forms
      Included forms related scss files
    • plugins
      Included all 3rd party plugins styling
    • tables
      Included all tables styling scss files
    • template
      Included template related scss files
    • theme-configurator
      Included theme-configurator related scss files
    • ui-elements
      Included ui-elements related scss files
    • _custom.scss
      For any custom or overdiding css
    • _mixins.scss
      File that included all reusable scss function & etc
    • _variables.scss
      File that included all theme variables
    • app.scss
      Entry file of all scss

CSS

In HTML pages, app.min.css was required by the template, you can include any 3rd party dependecies css below <-- page css --> comment

Javascript

ES6

Enlink JS logics was built with ES6 and will transpile into ES5(most web browsers supportted version) by using our task runner(refer to Installation section). Transplied JS files can be found under assets/js folder.

Note: ES6 files have to be compiled to ES5 first before we include them to HTML pages.

This is the folder strcture of assets/es6

    • constant
      Included all shareable constant js files
    • core
      Included core js files
    • pages
      Included js files that only required by certain pages
    • app.js
      Entry file of es6 module

JS

In assets/js included all transpiled ES6 file and other other JS files

    • pages
      All pages js files
    • vendors.min.js
      Compiled core 3rd party js file
    • vendors.min.js
      Compiled core js file

Include in HTML pages

In HTML pages, you can include your own js or any pages js under <-- page js -->

<!-- Core Vendors JS -->
<script src="assets/js/vendors.min.js"></script>

<!-- page js -->
<!-- page js import here -->

<!-- Core js -->
<script src="assets/js/app.min.js"></script>

Utility Classes

Enlink comes with many ultility classes which allow you to use part of bootstrap element to build your pages.

Margin

Class Description
Margin
.m-0 margin: 0px
.m-5 margin: 5px
.m-10 margin: 10px
.m-15 margin: 15px
.m-20 margin: 20px
.m-25 margin: 25px
.m-30 margin: 30px
... 5 interval per unit
.m-150 margin: 150px
Margin Top
.m-t-0 margin-top: 0px
.m-t-5 margin-top: 5px
.m-t-10 margin-top: 10px
.m-t-15 margin-top: 15px
.m-t-20 margin-top: 20px
.m-t-25 margin-top: 25px
.m-t-30 margin-top: 30px
... 5 interval per unit
.m-t-150 margin-top: 150px
Margin Bottom
.m-b-0 margin-bottom: 0px
.m-b-5 margin-bottom: 5px
.m-b-10 margin-bottom: 10px
.m-b-15 margin-bottom: 15px
.m-b-20 margin-bottom: 20px
.m-b-25 margin-bottom: 25px
.m-b-30 margin-bottom: 30px
... 5 interval per unit
.m-b-150 margin-bottom: 150px
Margin Right
.m-r-auto margin-right: auto
.m-r-0 margin-right: 0px
.m-r-5 margin-right: 5px
.m-r-10 margin-right: 10px
.m-r-15 margin-right: 15px
.m-r-20 margin-right: 20px
.m-r-25 margin-right: 25px
.m-r-30 margin-right: 30px
... 5 interval per unit
.m-r-150 margin-right: 150px
Margin Left
.m-l-auto margin-left: auto
.m-l-0 margin-left: 0px
.m-l-5 margin-left: 5px
.m-l-10 margin-left: 10px
.m-l-15 margin-left: 15px
.m-l-20 margin-left: 20px
.m-l-25 margin-left: 25px
.m-l-30 margin-left: 30px
... 5 interval per unit
.m-l-150 margin-left: 150px
Margin Vertical
.m-v-0 margin-top: 0px; margin-bottom: 0px;
.m-v-5 margin-top: 5px; margin-bottom: 5px
.m-v-10 margin-top: 10px; margin-bottom: 10px
.m-v-15 margin-top: 15px; margin-bottom: 15px
.m-v-20 margin-top: 20px; margin-bottom: 20px
.m-v-25 margin-top: 25px margin-bottom: 25px
.m-v-30 margin-top: 30px margin-bottom: 30px
... 5 interval per unit
.m-v-150 margin-top: 150px; margin-bottom: 150px
Margin Horizon
.m-h-auto margin-left: auto; margin-right: auto
.m-h-0 margin-left: 0px; margin-right: 0px;
.m-h-5 margin-left: 5px; margin-right: 5px
.m-h-10 margin-left: 10px; margin-right: 10px
.m-h-15 margin-left: 15px; margin-right: 15px
.m-h-20 margin-left: 20px; margin-right: 20px
.m-h-25 margin-left: 25px margin-right: 25px
.m-h-30 margin-left: 30px margin-right: 30px
... 5 interval per unit
.m-h-150 margin-left: 150px; margin-right: 150px

Padding

Class Description
Padding
.p-0 padding: 0px
.p-5 padding: 5px
.p-10 padding: 10px
.p-15 padding: 15px
.p-20 padding: 20px
.p-25 padding: 25px
.p-30 padding: 30px
... 5 interval per unit
.p-150 padding: 150px
Padding Top
.p-t-0 padding-top: 0px
.p-t-5 padding-top: 5px
.p-t-10 padding-top: 10px
.p-t-15 padding-top: 15px
.p-t-20 padding-top: 20px
.p-t-25 padding-top: 25px
.p-t-30 padding-top: 30px
... 5 interval per unit
.p-t-150 padding-top: 150px
Padding Bottom
.p-b-0 padding-bottom: 0px
.p-b-5 padding-bottom: 5px
.p-b-10 padding-bottom: 10px
.p-b-15 padding-bottom: 15px
.p-b-20 padding-bottom: 20px
.p-b-25 padding-bottom: 25px
.p-b-30 padding-bottom: 30px
... 5 interval per unit
.p-b-150 padding-bottom: 150px
Padding Right
.p-r-0 padding-right: 0px
.p-r-5 padding-right: 5px
.p-r-10 padding-right: 10px
.p-r-15 padding-right: 15px
.p-r-20 padding-right: 20px
.p-r-25 padding-right: 25px
.p-r-30 padding-right: 30px
... 5 interval per unit
.p-r-150 padding-right: 150px
Padding Left
.p-l-0 padding-left: 0px
.p-l-5 padding-left: 5px
.p-l-10 padding-left: 10px
.p-l-15 padding-left: 15px
.p-l-20 padding-left: 20px
.p-l-25 padding-left: 25px
.p-l-30 padding-left: 30px
... 5 interval per unit
.p-l-150 padding-left: 150px
Padding Vertical
.p-v-0 padding-top: 0px; padding-bottom: 0px;
.p-v-5 padding-top: 5px; padding-bottom: 5px
.p-v-10 padding-top: 10px; padding-bottom: 10px
.p-v-15 padding-top: 15px; padding-bottom: 15px
.p-v-20 padding-top: 20px; padding-bottom: 20px
.p-v-25 padding-top: 25px padding-bottom: 25px
.p-v-30 padding-top: 30px padding-bottom: 30px
... 5 interval per unit
.p-v-150 padding-top: 150px; padding-bottom: 150px
Padding Horizon
.p-h-0 padding-left: 0px; padding-right: 0px;
.p-h-5 padding-left: 5px; padding-right: 5px
.p-h-10 padding-left: 10px; padding-right: 10px
.p-h-15 padding-left: 15px; padding-right: 15px
.p-h-20 padding-left: 20px; padding-right: 20px
.p-h-25 padding-left: 25px padding-right: 25px
.p-h-30 padding-left: 30px padding-right: 30px
... 5 interval per unit
.p-v-150 padding-top: 150px; padding-bottom: 150px

Width

Class Description
.width-0 width: 0px
.width-10 width: 10%
.width-15 width: 15%
.width-20 width: 20%
.width-25 width: 25%
.width-30 width: 30%
... 5 interval per unit
.width-100 width: 100%

Font Size

Class Description
.font-size-8 font-size: 8px
.font-size-9 font-size: 9px
.font-size-10 font-size: 10px
.font-size-11 font-size: 11px
.font-size-12 font-size: 12px
.font-size-13 font-size: 13px
.font-size-14 font-size: 14px
.font-size-15 font-size: 15px
... 1 interval per unit until 30
.font-size-30 font-size: 30px
.font-size-35 font-size: 35px
.font-size-40 font-size: 40px
.font-size-45 font-size: 45px
.font-size-50 font-size: 50px
... 5 interval per unit until 200
.font-size-200 font-size: 200px

Position

Class Description
.relative position: relative
.absolute position: absolute
.fixed position: fixed
.static position: static

Overflow

Class Description
.overflow-hidden overflow: hidden
.overflow-y-hidden overflow-y: hidden
.overflow-x-hidden overflow-x: hidden
.overflow-auto overflow: auto
.overflow-y-auto overflow-y: auto
.overflow-x-auto overflow-x: auto

Border

Class Description
.border border: 1px solid $border-color;
.border.top border top
.border.right border right
.border.bottom border bottom
.border.left border left
.no-border no border

Border Radius

Class Description
.border-radius-4 border-radius: 4px
.border-radius-6 border-radius: 6px
.border-radius-8 border-radius: 4px
.border-radius-8 border-radius: 8px
.border-radius-10 border-radius: 10px
.border-radius-round border-radius: 50px

Opacity

Class Description
.opacity-01 opacity: 0.1;
.opacity-02 opacity: 0.2;
.opacity-03 opacity: 0.3;
.opacity-04 opacity: 0.4;
.opacity-05 opacity: 0.5;
.opacity-06 opacity: 0.6;
.opacity-07 opacity: 0.7;
.opacity-08 opacity: 0.8;
.opacity-09 opacity: 0.9;
.opacity-10 opacity: 1;

Sources & Credits

We've used the following images, icons, plugins or other files as listed.

Framework

JavaScript

Images

Icons

Font Used (Google Fonts)

Changelog

v1.0.0

  • Release